import * as d3 from "d3";

interface IMargin {
    left: number
    right: number
    top: number
    bottom: number 
}

interface IInitChartSettings {
    id: string
    width: number
    height: number
    margin: IMargin
}

const initChart = {
    id: "_chart",
    width: window.innerWidth,
    height: window.innerHeight,
    margin: {
        left: 5,
        right: 5,
        top: 5,
        bottom: 5
    }
}

export class Chart {
    private element: HTMLElement;
    private svg: any;
    private axis: any;
    constructor(elementId: string = "body", init: IInitChartSettings = initChart) {
        this.findPlace(elementId, init);
        const box = this.element.getBoundingClientRect();
        this.svg = d3.select(this.element).append("svg");
        this.svg.attr("id", init.id)
        .attr("viewBox", "0 0 600 600")
        .attr("width", box.width)
        .attr("height", box.height);
    }

    // Ищем место где показать SVG
    findPlace(elementId: string, init: IInitChartSettings) {
        let paper = document.getElementById(elementId);

        // Если не нашли HTML елемент, то добавляем SVG к Body
        if ((elementId !== '') && ( paper == null)) {
            paper = document.createElement('div')
            paper.setAttribute('id', elementId)
            paper.style.width = init.width + 'px';
            paper.style.height = init.height + 'px';
            document.body.appendChild(paper)
        }
        paper.style.marginTop = init.margin.top + 'px';
        paper.style.marginBottom = init.margin.bottom + 'px';
        paper.style.marginRight = init.margin.right + 'px';
        paper.style.marginLeft = init.margin.left + 'px';

        this.element = paper;        
    }

    getSVG() {
        return this.svg;
    }
    setAxis() {

    }
}




